<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<script type="text/javascript">
		var url;
		function addToolModel(){
			$('#addToolModel').dialog('open').dialog('setTitle','新建设备');
			$('#addToolForm').form('clear');
			url = 'addTool';
		}
        function addTool(){
            $('#addToolForm').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var json = eval('('+result+')');
                    if (json.re){
                        $('#addToolModel').dialog('close');		// close the dialog
                        $('#tooltable').datagrid('reload');	// reload the user data
                        $.messager.alert("提示",json.msg)
                    } else {
                        $.messager.show({
                            title: '提示',
                            msg: json.msg
                        });
                    }
                }
            });
        }

		function updateToolModel(){
			var row = $('#tooltable').datagrid('getSelected');
			if (row){
				$('#upToolModel').dialog('open').dialog('setTitle','修改设备');
				$('#upToolForm').form('load',row);
				url = 'updateTool';
			}
		}
        function updateTool(){
            $('#upToolForm').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var json = eval('('+result+')');
                    if (json.re){
                        $('#upToolModel').dialog('close');		// close the dialog
                        $('#tooltable').datagrid('reload');	// reload the user data
                        $.messager.alert("提示",json.msg)
                    } else {
                        $.messager.show({
                            title: '提示',
                            msg: json.msg
                        });
                    }
                }
            });
        }

		function delTool(){
			var row = $('#tooltable').datagrid('getSelected');
			if (row){
				$.messager.confirm('提示','确定删除该设备?',function(r){
					if (r){
                        $.ajax({
                            url: 'delTool',
                            type: 'post',
                            data: {'id': row.id},
                            dataType: "json",
                            success: function (result) {
                                if (result.re){
                                    $('#tooltable').datagrid('reload');
                                }else {
                                    $.messager.show({	// show error message
                                        title: '异常',
                                        msg: result.msg
                                    });
                                }
                            }
                        });
					}
				});
			}
		}

		function xxxx (val, row, idx) {
		    var toolid = row['id'];
            return "<a href='javascript:getToolById(\""+toolid+"\")'>详细信息</a>"
        }
        function getToolById(id) {
            $.ajax({
                url: 'getToolInfoById',
                type: 'post',
                data: {'id': id},
                dataType: "json",
                success: function (re) {
                    $('#table1').empty();
                    $('#table2').empty();
                    tr1 = "<td>"+re.tool.id+"</td><td>"+re.tool.version+"</td><td>"+
                        re.tool.name+"</td><td>"+re.tool.status+"</td>";
                    $('#table1').append(tr1);
                    tr2 = '';
                    $.each(re.list, function () {
                        tr2+="<li>"+this.uptime+
                            "<div>"+this.type+"&nbsp;&nbsp;"+this.trouble+"</div>";
                        if (this.beizhu){
                            tr2 += "<div>"+this.beizhu+"</div>";
                        }
                        tr2+="</li>";
                    });
                    $('#table2').append(tr2);
                    $('#window').window('open')
                }
            });
        }
	</script>
	
<table id="tooltable" title="设备信息表" class="easyui-datagrid" style="width:550px;height:250px"
       url="getAllTool" toolbar="#tooltoolbar" rownumbers="true" fitColumns="true"
       singleSelect="true" method="POST" fit="true"
>
    <thead>
        <tr>
            <th field="id" width="15%">设备编号</th>
            <th field="version" width="10%">设备类型</th>
            <th field="name" width="15%">设备名称</th>
            <th field="status" width="5%">设备状态</th>
            <th field="uptime" width="20%">更新日期</th>
            <th field="trouble" width="10%">故障类型</th>
            <th field="cz" width="25%" formatter="xxxx">操作</th>
        </tr>
    </thead>
</table>
<div id="tooltoolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addToolModel()">添加设备</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="updateToolModel()">修改设备</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delTool()">删除设备</a>
</div>


	<style type="text/css">
		#toolfm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			color:#666;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
		}
		.fitem label{
			display:inline-block;
			width:80px;
		}
	</style>

<!--添加模态框-->
<div id="addToolModel" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
        closed="true" buttons="#addToolModel-buttons" modal="true">
    <div class="ftitle">设备信息</div>
    <form id="addToolForm" method="post">
    	<div class="fitem">
            <label>设备编号:</label>
            <input name="id" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>设备类型:</label>
            <input name="version" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>设备名称:</label>
            <input name="name" class="easyui-validatebox" required="true">
        </div>
    </form>
</div>
<div id="addToolModel-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="addTool()">确定</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addToolModel').dialog('close')">取消</a>
</div>

<!--修改模态框-->
<div id="upToolModel" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#upToolModel-buttons" modal="true">
    <div class="ftitle">设备信息</div>
    <form id="upToolForm" method="post">
        <div class="fitem">
            <label>设备编号:</label>
            <input name="id" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>设备类型:</label>
            <input name="version" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>设备名称:</label>
            <input name="name" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>设备状态:</label>
            <input name="status" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>故障类型:</label>
            <input name="trouble" class="easyui-validatebox">
        </div>
        <div class="fitem">
            <label>更新时间:</label>
            <input name="uptime" class="easyui-validatebox">
        </div>
    </form>
</div>
<div id="upToolModel-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="updateTool()">确定</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#upToolModel').dialog('close')">取消</a>
</div>

<!-- 详情框 -->
<style>
    .table td {
        width: 100px;
        font-size: 16px;
        text-align: center;
    }
    #table2 li{
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 25px;
        margin-left: 30%;
    }
</style>
<div id="window" class="easyui-window" title="详细信息" style="width:600px;height:700px;padding:10px;"
     data-options="iconCls:'icon-save',modal:true,closed:true">
    <center>
        <table class="table" cellspacing="10">
            <tr><td>设备编号</td><td>设备类型</td><td>设备名称</td><td>目前状态</td></tr>
            <tr id="table1"></tr>
        </table>
    </center>
    <hr/>
    <div id="table2"></div>
</div>